<template>
    <div id = "nav">
    <div id="main">
        <div id="backbar">
            <span class="iconfont back">&#xe604;</span>
            我的订单
            <span class="iconfont serch">&#xe63d;</span>
        </div>
          <ul id="nav">
            <li>
                <router-link to="/mineall/myoder" class="flex">
                <div>
                    <span>全部</span>
                </div>
                </router-link>
            </li>
            <li>
                <router-link to="/" class="flex">
                <div>
                    <span>待付款</span>
                </div>
                </router-link>
            </li>
            <li>
                <router-link to="/" class="flex">
                <div>
                    <span>待收货</span>
                </div>
                </router-link>
            </li>
            <li>
                <router-link to="/" class="flex">
                <div>
                    <span>退款订单</span>
                </div>
                </router-link>
            </li>
             <li>
                <router-link to="/" class="flex">
                <div>
                    <span>已收货</span>
                </div>
                </router-link>
            </li>
            </ul>
      </div>
     
    </div>
</template>
<script>

export default {
    name:'MyOderMain',
  components:{
    
  },
    
}
</script>
<style lang="less">
 #main {
    #backbar{
        padding-top: .4rem;
        font-size: .5rem;
        line-height: .5rem;
        text-align: center;
        .back{
            float: left;
            padding: 0rem .5rem;
        }
        .serch{
            float:right;
            padding: 0rem .5rem;
        }
    }
     #backbar::after{
            content:"";				/*设置内容为空*/
            height:0;				/*高度为0*/
            line-height:0;			/*行高为0*/
            display:block;			/*将文本转为块级元素*/
            visibility:hidden;		/*将元素隐藏*/
            clear:both;				/*清除浮动*/
        }
    a {
        text-decoration: none;
        color: black;
    }
    .router-link-active {
        color: orangered;
    }
    #nav {
        display: flex;
        width: 100%;
        height: 2rem;
        margin: .2rem auto;
        bottom: 0;
        left: 0;
    }
    li {
        display: flex;
        flex: 1;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        .flex {
        display: flex;
        div {
            display: flex;
            flex-direction: column;
            align-items: center;
            border-radius:.2rem;
            //background-color: gray;
            span{
                padding: .02rem .1rem ;
            }
            .iconfont{
                font-size: .8rem;
            }
        }
        }
    }
    }
    
</style>